<template>
  <div class="map-exchange-bg">
    <el-card class="map-bg">
      <div id="dividerMap"></div>
      <div class="map-operate"></div>
    </el-card>

    <div class="operate-bg">
      <!--  v-if="showState == '1'" -->
      <template>
        <!-- 分单区域 -->
        <!-- <el-card> -->
        <el-tabs
          v-model="activeName"
          @tab-click="tabClick"
          type="border-card"
          class="tabs-self"
        >
          <el-tab-pane
            v-for="(singleItem, index) in singleObj.policyMapList"
            :key="index"
            :name="index + ''"
            :label="singleItem.areaName"
          >
            <el-form
              :model="queryParamsObj[`queryParams${index}`]"
              label-width="85px"
              label-position="left"
              @submit.native.prevent
              size="mini"
            >
              <el-form-item label="机构：">
                <el-input
                  v-model="singleObj.manageCom"
                  :disabled="true"
                  style="width: 90%"
                />
                <!-- <el-select v-model="queryParams.aaaa" placeholder="请选择机构" style="width: 90%;" clearable size="mini">
                  <el-option v-for="item in aaaaArr" :key="item.id" :label="item.name" :value="item.id" />
                </el-select> -->
              </el-form-item>
              <el-form-item label="行政区域：">
                <el-input
                  v-model="singleItem.placeName"
                  :disabled="true"
                  style="width: 90%"
                />
                <!-- <el-select v-model="queryParams.bbbb" placeholder="请选择行政区域" style="width: 90%;" clearable size="mini">
                  <el-option v-for="item in bbbbArr" :key="item.id" :label="item.name" :value="item.id" />
                </el-select> -->
              </el-form-item>
              <el-form-item label="渠道：">
                <el-select v-model="queryParams.type" placeholder="请选择" style="width: 90%;" clearable size="mini">
                  <el-option label="个险" value="1"  />
                  <el-option label="银保" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="交次：">
                <el-select v-model="queryParams.b" placeholder="请选择" style="width: 90%;" clearable size="mini">
                  <!-- <el-option v-for="(item,index) in paytimes" :key="index" :label="item.label" :value="item.value" /> -->
                  <el-option label="二次" value="2" :disabled="tpaytimes"/>
                  <el-option label="三次" value="3" :disabled="thpaytimes"/>
                  <el-option label="四次及以上" value="4" :disabled="fpaytimes"/>

                </el-select>
              </el-form-item>
              <el-form-item label="险类：">
                <el-select v-model="queryParams.c" placeholder="请选择" style="width: 90%;" clearable size="mini">
                  <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="应交月：">
                <el-date-picker
                  v-model="queryParamsObj[`queryParams${index}`].cccc"
                  @change="
                    (val) =>
                      dateChange(
                        val,
                        { fileBytes: ['startMonth', 'endMonth'] },
                        index
                      )
                  "
                  :editable="false"
                  type="monthrange"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  start-placeholder="开始年月"
                  end-placeholder="结束年月"
                  style="width: 90%"
                  size="mini"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>

            <el-divider></el-divider>
            <div class="page-title-bg">
              <div class="page-title" style="font-size: 14px">
                <div class="title-icon" style="height: 14px"></div>
                <span>分配续期专员</span>
                <el-button
                  @click="computeTry"
                  style="padding: 4px 8px"
                  type="primarry"
                  plain
                  size="mini"
                  >{{ !isTable ? "分配结果试算" : "专员" }}</el-button
                >
                <el-button type="text" class="btn-qry" @click="weiVisible = !weiVisible">未分配查询</el-button>
                <!-- <el-date-picker v-model="queryParams.eeee" :editable="false" type="month" format="yyyy-MM"
                  value-format="yyyy-MM" placeholder="选择月" style="width: 110px;margin-left: 35px;" size="mini">
                </el-date-picker>

                <el-dropdown class="dropdown-right" @command="handleCommand" trigger="click">
                  <span class="el-dropdown-link">
                    {{ queryParams.dddd ? dropdownData[queryParams.dddd] : '下拉菜单' }}
                    <i class="el-icon-caret-bottom"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">全量展示</el-dropdown-item>
                    <el-dropdown-item command="b">按月展示</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
              </div>
            </div>

            <div v-if="!isTable" class="page-bottom-con">
              <!-- <p v-if="true" class="tooltip">
                <i class="el-icon-warning" style="margin-right: 5px;"></i>您当前的专员分配比例合计不满足条件，无法试算，请修改或重新分配。
              </p> -->

              <div class="employee-boxs">
                <div
                  v-for="(areaSingleItem, areaSingleIndex) in areaSingleObj[
                    `areaSingle${index}`
                  ]"
                  :key="areaSingleIndex"
                  class="employee-box"
                >
                  <!-- 超量预警 -->
                  <!-- <p class="top-left-tooltip">
                    <i class="el-icon-warning float-icon-left" />
                    低量预警
                  </p> -->

                  <div
                    @click="handleDelete(areaSingleItem)"
                    class="top-right-icon-box"
                  >
                    <i class="el-icon-delete float-icon" />
                  </div>
                  <div class="top-info-box">
                    <div class="img-bg">
                      <img src="../../../assets/image/profile.png" />
                    </div>
                    <div style="margin-left: 20px">
                      <!-- 张萌 -->
                      <div>{{ areaSingleItem.personName || "" }}</div>
                      <div>分单比例：{{ areaSingleItem.proportion || 0 }}%</div>
                    </div>
                  </div>
                  <div class="bottom-info-box">
                    <span
                      >预分配工作量：{{ areaSingleItem.minWorkload || 0 }}
                      <!-- <i class="el-icon-right"></i>
                      {{ areaSingleItem.maxWorkload || 0 }} -->
                    </span>
                    <!-- <el-button @click="handleUpdate(item)" type="text">编辑</el-button> -->
                  </div>
                </div>

                <div @click="handleAdd" class="employee-box add-box">
                  <i class="el-icon-circle-plus-outline add-icon" />
                  <div>添加专员</div>
                </div>
              </div>
            </div>
            <div v-else class="area-trial">
              <div
                v-for="(itemTry, indexTry) in areaSingleObj[
                  `tryCompute${index}`
                ]"
                :key="indexTry"
              >
                <header class="table-header" v-show="indexTry == 0">
                  <div class="table-item" style="width: 80px">应交月</div>
                  <div class="table-item" style="width: 80px">续收专员</div>
                  <div class="table-item" style="width: 90px">当月总工作量</div>
                  <div class="table-item" style="width: 80px">分单比例</div>
                  <div class="table-item" style="width: 100px">
                    预分配工作量
                  </div>
                  <div class="table-item" style="width: 100px">
                    预分配总件数
                  </div>
                  <div class="table-item" style="width: 100px">
                    预分配督导件数
                  </div>
                  <div class="table-item" style="width: 100px">
                    预分配专收件数
                  </div>
                  <div class="table-item" style="width: 100px">
                    预分配总保费
                  </div>
                  <div class="table-item" style="width: 100px">
                    预分配大额件数
                  </div>
                  <div class="table-item" style="width: 100px">
                    预分配高困难件数
                  </div>
                  <div class="table-item" style="width: 120px">
                    专收件地址不明确保单
                  </div>
                  <div class="table-item" style="width: 100px">
                    专收件异地保单
                  </div>
                  <div class="table-item" style="width: 100px">
                    已分配工作量占比
                  </div>
                  <div class="table-item" style="width: 100px">
                    剩余可分配工作量
                  </div>
                </header>
                <div
                  v-for="(itemTry2, indexTry2) in itemTry.personWorkList"
                  :key="indexTry2"
                  class="table-content"
                >
                  <div class="table-item" style="width: 80px">
                    {{ indexTry2 == 0 ? itemTry.submitMonth || "" : "" }}
                  </div>
                  <div class="table-item" style="width: 80px">
                    {{ itemTry2.personName || "" }}
                  </div>
                  <div class="table-item" style="width: 90px">
                    {{ indexTry2 == 0 ? itemTry.sumWorkload || "" : "" }}
                  </div>
                  <div class="table-item" style="width: 80px">
                    {{ itemTry2.proportion || 0 }}%
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ itemTry2.preWorkload || 0 }}
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ Math.floor(Math.random()*51)+50 }}
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ Math.floor(Math.random()*50) }}
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ Math.floor(Math.random()*50) }}
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ Math.floor(Math.random()*5000)+100 }}
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ Math.floor(Math.random()*50) }}
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ Math.floor(Math.random()*40) }}
                  </div>
                  <div class="table-item" style="width: 120px">
                    {{ Math.floor(Math.random()*20) }}
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ Math.floor(Math.random()*10) }}
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ Math.floor(Math.random()*100) }}%
                  </div>
                  <div class="table-item" style="width: 100px">
                    {{ Math.floor(Math.random()*50) }}
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane name="2" label="分单区域1">分单区域2</el-tab-pane>
          <el-tab-pane name="3" label="分单区域1">分单区域3</el-tab-pane>
          <el-tab-pane name="4" label="分单区域1">分单区域4</el-tab-pane> -->

          <div style="float: right; margin: 20px 0">
            <el-button type="primary" @click="goBack" size="mini"
              >上一步</el-button
            >
            <el-button type="primary" @click="allocate" size="mini"
              >分 单</el-button
            >
          </div>
        </el-tabs>

        <!-- <div class="username-cls">姓名</div> -->

        <!-- 添加或修改专员对话框 :rules="rules" style="width: 100%;" -->
        <el-dialog
          :title="title"
          :visible.sync="open"
          :show-close="false"
          width="550px"
          append-to-body
          :close-on-click-modal="false"
        >
          <el-form
            ref="form"
            :model="form"
            label-position="left"
            label-width="130px"
            size="mini"
          >
            <el-form-item label="服务部/组:" prop="">
              <el-select
                v-model="form.personGroupCode"
                disabled
                placeholder="请选择"
                style="width: 100%"
                clearable
                size="mini"
              >
                <el-option
                  v-for="item in [
                    {
                      personGroupCode: '000000000726',
                      personGroupName: '无锡续收一组',
                    },
                  ]"
                  :key="item.personId"
                  :label="item.personName"
                  :value="item.personId"
                />
              </el-select>
              <!-- <el-input v-model.trim="form.personGroupName" placeholder="请输入" /> -->
            </el-form-item>
            <el-form-item label="续收专员:" prop="">
              <div class="person-info">
                <el-select
                  v-model="form.personId"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                  size="mini"
                >
                  <el-option
                    v-for="item in personList"
                    :key="item.personId"
                    :label="item.personName"
                    :value="item.personId"
                  />
                </el-select>
                <el-popover
                  placement="right"
                  width="400"
                  trigger="click"
                  v-if="form.personId"
                >
                  <div>
                    <div>入司：128天 等级：A级</div>
                    <div>宽末二次保费达成率：20%</div>
                    <div>宽末三次保费达成率：50%</div>
                    <div>宽末四次及以上保费达成率：80%</div>
                  </div>
                  <i class="el-icon-warning-outline" slot="reference"></i>
                </el-popover>
              </div>
            </el-form-item>
            <el-form-item label="分单比例:" prop="">
              <el-input v-model.trim="form.proportion" placeholder="请输入">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="大额单分单比例:" prop="">
              <el-input v-model.trim="form.bigproportion" placeholder="请输入">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="高困难件分单比例:" prop="">
              <el-input
                v-model.trim="form.hightproportion"
                placeholder="请输入"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="月工作量阈值:" prop="">
              <el-input
                v-model.trim="form.minWorkload"
                style="width: 45%"
                placeholder="每月工作量最低值"
              />
              <div style="display: inline-block; margin: 0 2.7%">
                <i class="el-icon-right"></i>
              </div>
              <el-input
                v-model.trim="form.maxWorkload"
                style="width: 45%"
                placeholder="每月工作量最高值"
              />
            </el-form-item>
            <el-form-item label="生效位置:" prop="">
              <el-input
                v-model.trim="form.activePlaceName"
                disabled
                placeholder="请输入"
              >
                <template slot="append">
                  <div @click="getLocation">
                    <i class="el-icon-location-outline"></i>定位
                  </div>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog
          title="未分单数据"
          :visible.sync="weiVisible"
          width="1200px"
          append-to-body
        >
          <el-table :data="tableList" max-height="420" style="width: 100%">
            <el-table-column width="110" label="行政区域" prop="bbbb" align="center" />
            <el-table-column width="110" label="分单区域" prop="dddd" align="center" />
            <el-table-column width="110" label="应交月" prop="eeee" align="center" />
            <el-table-column width="110" label="渠道" prop="ffff" align="center" />
            <el-table-column width="80" label="交次" prop="gggg" align="center" />
            <el-table-column width="180" label="险类" prop="hhhh" align="center" />
            <!-- <el-table-column width="80" label="保费" prop="iiii" align="center" /> -->
            <el-table-column width="80" label="件数" prop="jjjj" align="center" />
            <el-table-column width="90" label="工作量" prop="kkkk" align="center" />
            <el-table-column width="80" label="保费" prop="cccc" align="center" />
            <el-table-column mix-width="110" label="大额件单数" prop="mmmm" align="center" />
            <el-table-column mix-width="110" label="高困难件件数" prop="nnnn" align="center" />
          </el-table>
        </el-dialog>
      </template>
    </div>
  </div>
</template>
<script>
import { regeo, } from '@/api/amap'
import { getqueryPayintv,getPerson, aprelationList, aprelation, insuranceList, tryCompute, addCompute, aprelationDel } from '../../../api/renewalPlatformApi/index';
export default {
  name: "",
  props: {
    obj: {
      type: Object,
      default: () => {},
    },
    expandMapData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      weiVisible: false,
      tableList:[
        {bbbb:"梁溪区",dddd:"梁溪区",eeee:"2023-12-10",ffff:"个险",gggg:"二次",hhhh:'福满人生年金保险-111303',jjjj:'2',kkkk:'5',cccc:'600',mmmm:'6',nnnn:'5'}
      ],
      personList: [],
      singleObj: {
        // manageCom: 'xxxx人寿无锡分公司',
        // policyMapList: [{
        //   placeName: '南长区',
        //   "number": 1,
        //   "areaName": "10101",
        //   "companyCode": 860101,
        //   "placeCode": 320200,
        //   "centerTitude": [120.281836, 31.734516],
        //   "pathList": [[120.212129, 31.892501], [120.126308, 31.596013], [120.507135, 31.714722]]
        // }]
      },
      map: null,
      polygon: null,
      title: "",
      isTable: false,
      open: false,
      isGetLoaction: false,
      activeName: "0",
      queryParamsObj: {},
      queryParams: {
        aaaa: "",
        bbbb: "",
        cccc: [],
        dddd: "a",
      },
      // areaSingleObj: {},
      areaSingleObj: {},
      dropdownData: {
        a: "全量展示",
        b: "按月展示",
      },
      aaaaArr: [{ id: "111", name: "asdfasfgdg" }],
      bbbbArr: [{ id: "111", name: "asdfasfgdg" }],
      form: {
        personGroupCode: "000000000726",
        activePlaceName: "",
        proportion: "",
        minWorkload: "",
        maxWorkload: "",
        bightproportion: "",
        hightproportion: "",
      },
      list:[
        {label:"传统寿险",value:"1"},
        {label:"医疗险",value:"2"},
        {label:"重疾险",value:"3"},
        {label:"万能险",value:"4"},
        {label:"分红险",value:"5"},
        {label:"年金险",value:"6"},
        {label:"意外险",value:"7"},
      ],
      paytimes:[
        {label:'二次',value:'2'},
        {label:'三次',value:'3'},
        {label:'四次及以上',value:'4'},
      ],
      tpaytimes:false,
      thpaytimes:false,
      fpaytimes:false,
    }
  },
  watch:{
    'queryParams.type':{
      handler(val,old){
        this.getList(val)
      }
    }
  },
  created() {
    this.singleObj = JSON.parse(JSON.stringify(this.obj));
    this.singleObj.policyMapList.forEach((item, index) => {
      item.centerTitude = JSON.parse(item.centerTitude);
      item.pathList = JSON.parse(item.pathList);
      this.$set(this.queryParamsObj, `queryParams${index}`, {
        cccc: [],
      });
      this.$set(this.areaSingleObj, `areaSingle${index}`, []);
      this.$set(this.areaSingleObj, `tryCompute${index}`, []);
      // console.log('this.queryParamsObj', this.queryParamsObj);
      // this.queryParamsObj[`queryParams${index}`] = {
      //   cccc: []
      // }
    });
    console.log("this.singleObj", this.singleObj.policyMapList);
  },
  mounted() {
    getPerson().then((res) => {
      if (res.code == 200) {
        this.personList = res.data;
        // console.log(res);
      } else this.$message.error(res.msg);
    });
    this.tabClick({ index: "0" });
    // this.initReinsuranceMap(0);

    // 调试用
    // this.dateChange()
  },
  methods: {
    getList(val){
      console.log(val,"000000000000000000000")
      getqueryPayintv({saleChnl:val,manageCom:this.singleObj.manageCom}).then(res => {
        if (res.code == 200) {
          let array1 = ['2','3','4'];
          let array2 = []
          array2 = res.data.payintv.split(",")
          const ids = array1.map(e => e.id);
          let filtered = array2.filter(e => ids.includes(e.id))
          // console.log("333333333", filtered,JSON.stringify(filtered));
          JSON.stringify(filtered).includes(2) ? this.tpaytimes = false : this.tpaytimes = true;
          JSON.stringify(filtered).includes(3) ? this.thpaytimes = false : this.thpaytimes = true;
          JSON.stringify(filtered).includes(4) ? this.fpaytimes = false : this.fpaytimes = true;
        } else {
          this.$message.error(res.msg)
        };
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      if (!this.isGetLoaction) {
        this.reset();
        this.open = true;
        this.title = "添加续收专员";
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      if (!this.isGetLoaction) {
        this.reset();
        // const payOrderId = row.payOrderId || this.ids;
        // getOrder(payOrderId).then((response) => {
        //   this.form = response.data;
        this.open = true;
        this.title = "修改续收专员";
        // });
      }
    },
    submitForm() {
      if (this.form.activePlaceName != "") {
        this.form.areaId = this.singleObj.policyMapList[this.activeName].areaId;
        aprelation(this.form).then((res) => {
          if (res.code == 200) {
            this.getAprelationList();
            this.isGetLoaction = false;
            this.open = false;
          } else this.$message.error(res.msg);
        });
      } else {
        this.$message.error("请在分单区域点击选择生效位置！");
      }
    },
    // 分 单
    allocate() {
      let placeCode = this.singleObj.policyMapList[this.activeName].placeCode
      // return
      // console.log('allocate');
      let queryParams = JSON.parse(
        JSON.stringify(this.queryParamsObj[`queryParams${this.activeName}`])
      );
      delete queryParams.cccc;
      if (!queryParams.startMonth) return this.$message.error("请选择月份");
      let fn = (queryParams) => {
        addCompute({
          placeCode: this.singleObj.policyMapList[this.activeName].placeCode,
          areaId: this.singleObj.policyMapList[this.activeName].areaId,
          ...queryParams,
          // placeCode: '320213',
          // startMonth: '2022-04',
          // endMonth: '2022-09',
        }).then((res) => {
          if (res.code == 200) {
            this.$router.push({
              path:'policyManage',
              query:{placeCode : placeCode}
            });
            // this.$set(this.areaSingleObj, `tryCompute${this.activeName}`, res.data)
            // this.isTable = true
          }
        });
      };

      this.tryCompute(queryParams, fn);
    },
    goBack() {
      this.$emit("changeTab", "2", this.expandMapData);
    },
    cancel() {
      this.isGetLoaction = false;
      this.open = false;
    },
    // 表单重置
    reset() {
      this.form = {
        personGroupCode: "000000000726",
        activePlaceName: "",
        proportion: "",
        minWorkload: "",
        maxWorkload: "",
      };
    },

    getLocation() {
      this.isGetLoaction = true;
      this.open = false;
    },
    // 区域遮罩点击事件
    polygonClick(e) {
      // console.log('polygonClick', e);
      if (this.isGetLoaction) {
        regeo({ location: e.lnglat + "" }).then((res) => {
          console.log(res);
          if (res.status == 1) {
            this.form.activePlaceName = res.regeocode.formatted_address;
            this.form.activePlace = JSON.stringify(e.lnglat);
            this.open = true;
          }
        });
      }
      // console.log(e, e.lnglat + '')
    },
    //创建多边形111111
    initReinsuranceMap(n) {
      this.map = null;
      // let adCode = '320200';
      this.map = new AMap.Map("dividerMap", {
        // center: [116.30946, 39.937629],
        center: this.singleObj.policyMapList[n].centerTitude,
        zoom: 3,
      });

      // 创建多边形
      // let path = [[120.120001, 31.619678], [120.134025, 31.520747], [120.30231, 31.543697], [120.224338, 31.640693]]

      this.polygon = new AMap.Polygon({
        map: this.map,
        strokeColor: "#000",
        fillColor: "#fff",
        // fillOpacity: 0.2,
        // path: path
        path: this.singleObj.policyMapList[n].pathList,
      });
      // console.log('path', path, this.singleObj.policyMapList[n].pathList);
      // console.log('center', [116.30946, 39.937629], this.singleObj.policyMapList[n].centerTitude);

      this.polygon.on("click", this.polygonClick);
      this.map.setFitView();

      // let polygons = [];
      // //行政区划查询
      // let opts = {
      //   subdistrict: 1,   // 返回下一级行政区
      //   showbiz: false  // 最后一级返回街道信息
      // };
      // let district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
      // // 清除地图上所有覆盖物
      // for (let i = 0, l = polygons.length; i < l; i++) {
      //   polygons[i].setMap(null);
      // }
      // district.setLevel('city'); // 行政区级别
      // district.setExtensions('all');
      // // 行政区查询：按照adcode进行查询可以保证数据返回的唯一性
      // const _this = this;
      // district.search(adCode, function (status, result) {
      //   if (status === 'complete') {
      //     let data = result.districtList[0];
      //     let bounds = data.boundaries;
      //     if (bounds) {
      //       for (let i = 0, l = bounds.length; i < l; i++) {
      //         let polygon = new AMap.Polygon({
      //           map: _this.map,
      //           strokeWeight: 1,
      //           strokeColor: '#0091ea',
      //           fillColor: '#80d8ff',
      //           fillOpacity: 0.2,
      //           path: bounds[i]
      //         });
      //         polygons.push(polygon);
      //       }
      //       _this.map.setFitView();//地图自适应
      //     }
      //   }
      // });
    },
    // 地图初始化
    mapLoad() {
      let disCountry = new AMap.DistrictLayer.Country({
        zIndex: 10,
        SOC: "CHN",
        depth: 1,
        styles: {
          "nation-stroke": "#ff0000",
          "coastline-stroke": "#0088ff",
          "province-stroke": "grey",
        },
      });
      let map = new AMap.Map("dividerMap", {
        zooms: [4.2, 8],
        center: [106.122082, 33.719192],
        zoom: 4.6,
        isHotspot: false,
        defaultCursor: "pointer",
        layers: [disCountry],
        viewMode: "3D",
      });
      map.addControl(new AMap.Scale());
      map.addControl(new AMap.ToolBar({ liteStyle: true }));
      map.on("complete", function () {
        let layer = new AMap.LabelsLayer({
          // 开启标注避让，默认为开启，v1.4.15 新增属性
          collision: false,
          // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
          animation: true,
        });
        for (let i = 0; i < LabelsData.length; i++) {
          let labelsMarker = new AMap.LabelMarker(LabelsData[i]);
          layer.add(labelsMarker);
        }
        map.add(layer);
      });
    },
    handleCommand(val) {
      this.queryParams.dddd = val;
    },
    getAprelationList() {
      aprelationList({
        areaId: this.singleObj.policyMapList[this.activeName].areaId,
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.$set(
            this.areaSingleObj,
            `areaSingle${this.activeName}`,
            res.data
          );
          this.isTable = false;
          res.data.forEach((item, index) => {
            if (item.personName) {
              // item.personName = '姓名' + index
              let markerContent = `<div class="username-cls" style="width: ${
                16 + item.personName.length * 12
              }px">${item.personName}</div>`;

              let marker = new AMap.Marker({
                position: JSON.parse(item.activePlace),
                // position: [item.longitude, item.latitude],
                // 将 html 传给 content
                content: markerContent,
                // 以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-13, -30),
              });

              // 将 markers 添加到地图
              this.map.add(marker);
            }
          });
        }
      });
    },
    tabClick(el) {
      // console.log('el', el);
      this.initReinsuranceMap(el.index);
      this.getAprelationList();
      let queryParams = JSON.parse(
        JSON.stringify(this.queryParamsObj[`queryParams${el.index}`])
      );
      if (queryParams.startMonth) this.dateChange(null, null, el.index);
    },
    // 试算
    computeTry() {
      if (!this.isTable) {
        let queryParams = JSON.parse(
          JSON.stringify(this.queryParamsObj[`queryParams${this.activeName}`])
        );
        delete queryParams.cccc;
        if (!queryParams.startMonth) return this.$message.error("请选择月份");
        this.tryCompute(queryParams);
        // tryCompute({
        //   placeCode: this.singleObj.policyMapList[this.activeName].placeCode,
        //   areaId: this.singleObj.policyMapList[this.activeName].areaId,
        //   ...queryParams,
        //   // placeCode: '320213',
        //   // startMonth: '2022-04',
        //   // endMonth: '2022-09',
        // }).then(res => {
        //   if (res.code == 200) {
        //     this.$set(this.areaSingleObj, `tryCompute${this.activeName}`, res.data)
        //     this.isTable = true
        //   }
        // })
      } else this.getAprelationList();
    },
    // 试算掉接口
    tryCompute(queryParams, fn) {
      tryCompute({
        placeCode: this.singleObj.policyMapList[this.activeName].placeCode,
        areaId: this.singleObj.policyMapList[this.activeName].areaId,
        ...queryParams,
        // placeCode: '320213',
        // startMonth: '2022-04',
        // endMonth: '2022-09',
      }).then((res) => {
        if (res.code == 200) {
          if (fn) fn(queryParams);
          else {
            this.$set(
              this.areaSingleObj,
              `tryCompute${this.activeName}`,
              res.data
            );
            this.isTable = true;
          }
        }
      });
    },
    // range 日期change事件
    dateChange(val, item, index) {
      if (item) {
        val = val || ["", ""];
        console.log("this.queryParamsObj", this.queryParamsObj);
        item.fileBytes.forEach((fileByte, index) =>
          this.$set(
            this.queryParamsObj[`queryParams${this.activeName}`],
            fileByte,
            val[index]
          )
        );
      }
      console.log("this.queryParamsObj", this.queryParamsObj);
      let queryParams = JSON.parse(
        JSON.stringify(this.queryParamsObj[`queryParams${index}`])
      );
      // let queryParams = JSON.parse(JSON.stringify(this.queryParamsObj[`queryParams${this.activeName}`]))
      delete queryParams.cccc;
      // 掉接口
      insuranceList({
        placeCode: this.singleObj.policyMapList[this.activeName].placeCode,
        areaId: this.singleObj.policyMapList[this.activeName].areaId,
        ...queryParams,
        // placeCode: '320213',
        // startMonth: '2022-04',
        // endMonth: '2022-09',
        // areaId: '1670369044615020546',
      }).then((res) => {
        if (res.code == 200) {
          let sum = res.data.sum;
          //构建信息窗体中显示的内容
          let info = [];
          // info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
          info.push(`<p class='input-item'>总工作量: ${sum.workLoad || 0}</p>`);
          info.push(`<p class='input-item'>总件数: ${sum.number || 0}件</p>`);
          info.push(`<p class='input-item'>总保费: ${sum.fee || 0}元</p>`);
          info.push(`<p class='input-item'>高困难件数: ${sum.number > 0 ? 3 : 0}件</p>`);
          info.push(`<p class='input-item'>大额单数: ${sum.number > 0 ? 6 : 0}件</p>`);
          let infoWindow = new AMap.InfoWindow({
            anchor: "top-left",
            // content: '这是信息窗体！这是信息窗体！',
            content: info.join(""),
          });
          let latitudeArr = this.singleObj.policyMapList[
            this.activeName
          ].pathList.map((item) => item[0]);
          let max = Math.max(...latitudeArr);

          // infoWindow.open(this.map, [120.257104, 31.575872])
          infoWindow.open(
            this.map,
            this.singleObj.policyMapList[this.activeName].pathList[
              latitudeArr.findIndex((item) => item == max)
            ]
          );
          // let a = this.singleObj.policyMapList[this.activeName].pathList[latitudeArr.findIndex(item => item == max)]
          // console.log('aaa', a);
          res.data.pathArray.forEach((item) => {
            // 点标记显示内容，HTML要素字符串 onclick="clearMarker()"
            let markerContent = '<div class="dot"></div>';

            let marker = new AMap.Marker({
              // position: position,
              position: [item.longitude, item.latitude],
              // 将 html 传给 content
              content: markerContent,
              // 以 icon 的 [center bottom] 为原点
              offset: new AMap.Pixel(-13, -30),
            });

            // 将 markers 添加到地图
            this.map.add(marker);
          });
          console.log(res);
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const personId = row.apId;
      this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        aprelationDel(personId).then((res) => {
          if (res.code == 200) {
            this.getAprelationList();
            this.$message.success("删除成功");
          }
        });
        // return delSecret(sns);
      });
      // .then(() => {
      //   this.getList();
      //   this.$message.success("删除成功");
      // })
    },
    getplaceCode(item){
      console.log(this.singleObj.policyMapList[this.activeName].placeCode,"this.singleObj.policyMapList[this.activeName].placeCodethis.singleObj.policyMapList[this.activeName].placeCode")
    }
  },
};
</script>

<style>
.dot {
  width: 5px;
  height: 5px;
  background-color: black;
  border-radius: 50%;
}

.username-cls {
  text-align: center;
  display: inline-block;
  color: #2174a8;
  padding: 1px 8px;
  background-color: #aed8ee;
  border-radius: 15px;
  font-size: 6px !important;
}
</style>
<style lang="scss" scoped>
.person-info {
  display: flex;
  align-items: center;
  i {
    font-size: 20px;
    margin-left: 10px;
  }
}
.map-exchange-bg {
  display: flex;
  overflow-x: scroll;

  .page-title-bg {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .page-title {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2a2a2a;

      .title-icon {
        width: 6px;
        height: 20px;
        background-color: #082aff;
      }

      span {
        margin: 0 10px;
      }

      .dropdown-right {
        position: absolute;
        right: 0;
        color: #2a2a2a;
      }

      .btn-qry{
        flex: 1;
        text-align: right;
        margin-right: 10px;
      }
    }

    .page-title-operate {
      padding-left: 10px;
    }
  }

  .page-bottom-con {
    width: 100%;
    margin-top: 10px;

    .tooltip {
      background-color: #f7d4cd;
      padding: 8px;
      color: #f20202;
      font-size: 10px;
    }

    .employee-boxs {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0 2px;

      .employee-box {
        position: relative;
        box-sizing: border-box;
        padding: 20px;
        width: 47%;
        margin: 10px 0;
        height: 100px;
        border-radius: 3px;
        box-shadow: 0px 0px 5px 0px rgba(150, 150, 150, 0.5);
        overflow: hidden;

        .top-left-tooltip {
          position: absolute;
          padding: 2px 10px;
          left: 0;
          top: 0;
          background-color: #f7d4cd;
          color: #f20202;
          font-size: 10px;
          border-bottom-right-radius: 8px;

          .float-icon-left {
            margin-right: 3px;
          }
        }

        .top-right-icon-box {
          position: absolute;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          right: -20px;
          top: -20px;
          background-color: #b6ddf1;

          .float-icon {
            position: absolute;
            bottom: 6px;
            left: 6px;
            font-size: 10px;
          }
        }

        .top-info-box {
          display: flex;
          // margin-top: 10px;
          height: 40px;

          .img-bg {
            position: relative;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            background-color: #028acf;

            img {
              position: absolute;
              width: 17px;
              height: 17px;
              bottom: 5px;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }

        .bottom-info-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          height: 20px;
        }
      }

      .add-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #d1d1d1;

        .add-icon {
          font-size: 35px;
          margin-bottom: 10px;
        }
      }

      .employee-box:nth-child(odd) {
        margin-right: 6%;
      }
    }
  }

  .area-trial {
    overflow-x: scroll;
    .table-header {
      min-width: max-content;
      position: relative;
      // width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      padding: 10px;
      font-weight: bold;
      font-size: 12px;
      background-color: #f5f7fa;
      // overflow-x: scroll;
      > div {
        flex-shrink: 0;
      }
    }

    .table-item {
      text-align: center;
    }

    .table-content {
      min-width: max-content;
      position: relative;
      // width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      font-size: 12px;
      // overflow-x: scroll;
      > div {
        flex-shrink: 0;
      }
      border-bottom: 1px solid #ccc;
    }
  }
  .operate-bg {
    width: 39%;
    margin-left: 10px;

    .tabs-self {
      .el-tabs__content {
        .el-tab-pane {
          height: calc(100vh - 160px - 38px - 28px - 10px);
          overflow-y: scroll;
        }
      }
    }
  }

  .map-bg {
    width: 60%;
    position: relative;
    ::v-deep.el-card__body {
      padding: 0;
    }
    #dividerMap {
      width: 100%;
      height: calc(100vh - 150px);
    }

    .map-operate {
      display: flex;
      align-items: center;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 10;
      padding: 10px;
      background-color: #fff;

      .map-operate-icon,
      .map-operate-del-icon,
      .map-operate-ok-icon {
        font-size: 22px;
        font-weight: bold;
        padding: 0 8px;
      }

      .map-operate-del-icon {
        color: red;
      }

      .map-operate-ok-icon {
        color: #67c23a;
      }
    }
  }
}
</style>
